<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue键盘事件</title>
    <style type="text/css">
        #div-1 {
            /*width: 300px;*/
            /*height: 300px;*/
            background-color: #f7e1b5;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="vue-3—top">
    <div id="div-1" @click="click1()">
        <input type="text" placeholder="用户名" @keydown.enter="keyPrint($event)">
        <br>
        <input type="password" placeholder="密码">
        <br>
        <input type="button" value="登录" v-if="flag">
        <br><br>
        <br><br>
        <input type="text" placeholder="宽" v-model="imgWidth"><br>
        <input type="text" placeholder="高" v-model="imgHeight"><br><br>
        <img :src="imageUrl" alt="" :width="imgWidth" :height="imgHeight"><br><br>
    </div>
</div>
</body>
<script type="text/javascript">
    Vue.config.keyCodes = {
        "aa": 65
    };

    let vm = new Vue({
        el: '#vue-3—top',
        data: {
            flag: true,
            imageUrl:'http://image.gxnews.com.cn/uploadpic/2015/04/17/1452895b8b06ca6e50e14ba7ac063384.jpg',
            imgWidth: 100,
            imgHeight: 100
        },
        methods: {
            click1() {
                // alert('一被点击了');
                console.log('一被点击了');
            },
            write() {
                // alert('阻止成功！');
                console.log('阻止成功！');
            },
            keyPrint(e) {
                console.log(e.keyCode);
                if (e.keyCode == 13) {
                    console.log('回车');
                }
                this.flag = !this.flag;
            }
        }
    });
</script>
</html>